<template>
	<view class="grades">

		<uni-card>
			搜索内容<uni-search-bar :radius="100" @input="searchAction($event)"></uni-search-bar>
			<!-- <button class="query">搜索</button> -->
		</uni-card>

		<uni-card title="成绩列表">

			<picker :range="semester" @change="semesterChange">
				{{ semester[semesterIndex] }}
			</picker>



			<uni-table stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">学科</uni-th>
					<uni-th align="center">成绩</uni-th>
				</uni-tr>
				<uni-tr v-if="searchResult.length >0" v-for="item in this.searchResult">
					<uni-td align="center">{{item.subjects}}</uni-td>
					<uni-td align="center">{{item.scores}}</uni-td>
				</uni-tr>
				<uni-tr v-else v-for="item in this.result">
					<uni-td align="center">{{item.subjects}}</uni-td>
					<uni-td align="center">{{item.scores}}</uni-td>
				</uni-tr>
			</uni-table>

		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				result: [],
				searchResult: [],
				semester: ["大一上学期", "大一下学期", "大二上学期", "大二下学期"],
				semesterIndex: 0,
				list: []
			}
		},
		mounted() {
			this.getScoresAll(),
				this.searchAction()
		},
		methods: {
			semesterChange: function(e) {
				console.log(e)
				//获得对象的 detail的 value
				//通过数组的下标改变显示在页面的值
				this.semesterIndex = e.detail.value;
			},
			getScoresAll() {
				uni.request({
					url: 'https://mock.apifox.cn/m1/1392280-0-default/query?apifoxToken=59M2PUiNtRqEoawlk5S819tgQNaAdXxz',
					method: 'GET',
					data: {},
					success: res => {
						console.log(res)
						this.result = res.data.data;
						console.log(this.result)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			searchAction(e) {
				const inputValut = e;
				this.searchResult = this.result.filter((item) => {
					if (item.subjects.includes(inputValut)) {
						return item;
					}
				})
			}
		},
	}
</script>

<style>
	.grades {
		opacity: 0.7;
	}

/* 	.query {
		width: 300rpx;
	} */
</style>
